<template>
	<view>
		<u-navbar class="navbar" :border-bottom="false" title="售后订单" :title-size="36" :title-bold="true" :title-color="textColor" :background="{backgroundColor: bgColor}" :customBack="back">
		</u-navbar>
		<!-- 搜索栏和选项卡固定 -->
		<view class="top-fixed">
			<!-- 搜索栏位 -->
			<ak-search-input :searchPlaceHolder="searchPlaceHolder" @focus="showMask(true)" @blur="showMask(false)" @search="search"></ak-search-input>
			<!-- subsection区域 -->
			<ak-order-subsection :current="current" :subsectionList="subsectionList" @change="changeCurrent"></ak-order-subsection>
		</view>
		<!-- 占位盒子 -->
		<view style="height: 170rpx;"></view>
		<!-- 列表区域 -->
		<view v-if="list.length == 0" style="margin-top: 150rpx;display: flex;flex-direction: column;align-items: center;">
			<image src="/static/mendian/shoouhou_kong.png" style="width: 428rpx;height: 346rpx;margin-bottom: 88rpx;" mode=""></image>
			<text class="u-font-28 grey-color">暂无售后</text>
		</view>
		<view v-else class="list">
			<view class="list-item" v-for="(item, index) in list" :key="index" @click="$mRouter.push({ route: '/pages/purchase/shouhou/xiangqing?id=' + item.id })">
				<view class="item-header">
					<view class="left">
						{{ item.approverShopName }}
					</view>
					<view class="right">
						<text :style="{fontSize: '26rpx', color: badgeColor}">{{item.statusDescription}}</text>
						<!-- <text v-if="item.state == -1" :style="{fontSize: '26rpx', color: badgeColor}">卖家已拒绝</text>
						<text v-else-if="item.state == 0" :style="{fontSize: '26rpx', color: badgeColor}">买家已取消</text>
						<text v-else-if="item.state == 1" :style="{fontSize: '26rpx', color: badgeColor}">待审核</text>
						<text v-else-if="item.state == 2" :style="{fontSize: '26rpx', color: badgeColor}">待退货</text>
						<text v-else-if="item.state == 3" :style="{fontSize: '26rpx', color: badgeColor}">待收货</text>
						<text v-else-if="item.state == 4" :style="{fontSize: '26rpx', color: badgeColor}">已完成</text> -->
					</view>
				</view>
				<view class="item-content" v-for="info in item.items" :key="info.itemId">
					<img :src="info.itemResourceUrl" alt="" style="width: 180rpx;height:180rpx;border-radius: 10rpx;">
					<view class="u-flex-col u-row-around u-m-l-20" style="flex-grow: 1;">
						<view>{{ info.itemName }}</view>
						<view class="u-flex u-row-between">
							<view class="u-flex u-row-left">
								<view class="grey-box">
									{{ info.specification }}
								</view>
							</view>
							<view class="u-font-32">
								￥{{ info.unitPrice }}
							</view>
						</view>
						<view class="u-flex u-row-right">
							<view  class="grey-box">
								x{{ info.quantity }}
							</view>
						</view>
					</view>
				</view>
				<view class="u-flex u-row-between" >
					<view class="u-flex u-row-between">
						<view v-if="item.afterSalesType == 1" class="u-font-24 theme-color theme-box">
							退款
						</view>
						<view v-else class="u-font-24 theme-color theme-box">
							退货
						</view>
					</view>
					<view class="u-text-right">
						<text :style="{fontSize: '32rpx', color: greyColor}">总价￥4300.00</text>
						<text class="u-font-28">退款额 <text class="u-font-36 badge-color">￥{{ item.amount }}</text></text>
					</view>
				</view>
				<hr style="margin-top: 30rpx;opacity: 0.1;" />
				<view class="item-footer">
					<view  class="u-font-24 grey-color">售后单号：{{ item.serialNo }}</view>
					<view  class="u-font-24 grey-color">订单号：{{ item.serialNo }}</view>
				<!-- 	<view v-if="item.state == 2" class="u-flex">
						<u-button class="u-m-l-15" shape="circle" :ripple="true" :hair-line="false" hover-class="none"
							:custom-style="getBtStyle('plain', 160, 70, 26, themeColor)" @click="tradeId = item.id;logisticsShow = true">录入单号</u-button>
					</view> -->
				</view>
			</view>
		</view>
		<!-- 录入单号 -->
		<u-popup v-model="logisticsShow" mode="bottom">
			<view class="box-padding">
				<u-field v-model="logisticsNo" required :field-style="{marginLeft: '20rpx'}" label="物流单号" placeholder="请输入物流单号" placeholder-style="color: #999999;" />
				<u-field v-model="logisticsCompany" required :field-style="{marginLeft: '20rpx'}" label="物流公司" placeholder="输入单号自动识别" placeholder-style="color: #999999;" />
				<view class="u-flex u-row-center" style="height: 80rpx;">
					<text class="u-font-32 theme-color" @click="handleLogistics">确认</text>
				</view>
			</view>
		</u-popup>
		<!-- 遮罩层 -->
		<u-mask :show="isShowMask" :duration="0" :z-index="10"></u-mask>
	</view>
</template>

<script>
	import AkSearchInput  from '@/components/ak-search-input'
	import AkOrderSubsection from '@/components/ak-order-subsection'
	export default {
		components: { AkSearchInput, AkOrderSubsection },
		data() {
			let arr = []
			for (let i = 0; i < 15; i++) {
				arr.push({
					didian: '北京市朝阳区高碑店',
					zhuangtai: [0, 1][Math.floor((Math.random()*[0, 1].length))],
					name: '灵魂判官100%金龙舌兰40%',
					xinghao: '40%vol  700ml/瓶',
					jiage: 430,
					shuliang: 10,
					zongjia: 4300,
					shifu: 4300,
					danhao: 2041598991046046053
				})
			}
			return {
				searchPlaceHolder: '订单号',
				isShowMask: false,
				params: {
					// ApproverShopId: this.$store.getters['shop/id'],
					TradeNo: '',
					pageIndex: 1,
					pageSize: 10,
				},
				list: [],
				current: 0,
				subsectionList: [
					{
						i:99,
						title: '全部',
					},
					{
						i: 0,
						title: '待审核',
					},
					{
						i: 1,
						title: '待退款',
					},
					{
						i: 2,
						title: '已完成',
					}
				],
				tradeId: null,
				logisticsShow: false,
				logisticsNo: '',
				logisticsCompany: '',
			}
		},
		onShow() {
			this.list = []
			this.getList()
		},
		onLoad() {
			
		},
		onReachBottom() {
			this.params.pageIndex++
			this.getList()
		},
		methods: {
			async getList() {
				if(this.params.TradeNo === '') delete this.params.TradeNo;
				const res = await this.$http.get('api/v1.3/AfterSalesOrder/GetApplicantASOByPage', { params: this.params })
				if (res.list.length == 0) return
				this.list = this.list.concat(res.list)
			},
			// 物流发货
			async handleLogistics() {
				if (!this.logisticsCompany) {
					return this.$u.toast('请输入物流公司')
				}
				if (!this.logisticsNo) {
					return this.$u.toast('请输入物流单号')
				}
				const data = {
					id: this.tradeId,
					logisticsNo: this.logisticsNo,
					logisticsCompany: this.logisticsCompany
				}
				const res = await this.$http.put('api/AfterSale/InputLogisticsNo', data)
				this.logisticsShow = false
				this.$u.toast('录入成功', 1000, 'success')
				this.logisticsNo = ''
				this.logisticsCompany = ''
				this.list = []
				this.params.pageIndex = 1
				this.getList()
				this.logisticsShow = false
			},
			changeCurrent(index) {
				if (index !== 99) {
					this.params.Status = index
				} else {
					delete this.params.Status
				}
				this.list = []
				this.params.pageIndex = 1
				this.current = index
				this.getList()
			},
			search(value) {
				this.params.TradeNoOrItemName = value
				this.list = []
				this.params.pageIndex = 1
				this.getList()
			},
			showMask(bool) {
				if (bool) {
					this.searchPlaceHolder = ''
				} else {
					this.searchPlaceHolder = '订单号'
				}
				this.isShowMask = bool
			},
			back() {
				this.$mRouter.switchTab({ route: '/pages/purchase/index' })
			}
		}
	}
</script>

<style lang="scss" scoped>
	// 列表
	.list {
		.list-item {
			background-color: #FFFFFF;
			padding: 0 35rpx;
			margin-bottom: 20rpx;
			.item-header {
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				font-weight: bold;
				line-height: 81rpx;
				height: 81rpx;
				.left {
					font-size: 30rpx;
				}
				.right {
					font-size: 26rpx;
					color: $theme-color;
				}
			}
			.item-content {
				display: flex;
				justify-content: flex-start;
				margin-bottom: 30rpx;
				.center {
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-around;
				}
			}
			.item-footer {
				// display: flex;
				// justify-content: space-between;
				// align-items: center;
				padding: 20rpx 0;
				min-height: 110rpx;
			}
		}
	}
	.theme-box {
		border: 1rpx solid $theme-color;
		padding: 5rpx 16rpx;
		border-radius: 5rpx;
	}
</style>
